<template>
  <div>
    <ul>
      <li v-for="obj in arr" :key="obj.id">
        {{ obj.name }} --- <input type="text" />
      </li>
    </ul>
    <button @click="change">交换下标1和2元素位置</button>
    <button @click="add">从中间新增1个</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          name: "小明",
          id: 100,
        },
        {
          name: "老王",
          id: 194,
        },
        {
          name: "老秦",
          id: 239,
        },
        {
          name: "老李",
          id: 15,
        },
        {
          name: "老赵",
          id: 27,
        },
      ],
    };
  },
  methods: {
    change() {
      // 结论1: 更新时, v-for是就地更新
      let obj = this.arr[1];
      this.$set(this.arr, 1, this.arr[2]);
      this.$set(this.arr, 2, obj);
    },
    add() {
      this.arr.splice(2, 0, { name: "新来的", id: 999 });
    },
  },
};
</script>